<template>
  <div v-if="feedbackAuth">
    <page-header :title="$t('m.userFeedback')" :has-return="false">
    </page-header>
    <div class="container">
      <div class="list_div">
        <div class="page_list_div">
          <el-form class="page_list_top" label-position="right">
            <el-form-item :label="$t('m.search_') + ':'" class="page_list_top">
              <el-input
                :placeholder="$t('m.User_ID')"
                prefix-icon="el-icon-search"
                style="width:220px;"
                clearable
                v-model="params.search"
              />
            </el-form-item>
            <el-form-item
              :label="$t('m.branch_Creationdate') + ':'"
              class="page_list_top"
            >
              <el-date-picker
                style="width:246px;"
                v-model="params.rangeTime"
                :picker-options="datePickerOptions"
                :default-value="timeDefaultShow"
                type="daterange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="timestamp"
                range-separator="~"
                :start-placeholder="$t('m.start_date')"
                :end-placeholder="$t('m.end_date')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :label="$t('m.invite_Type') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="params.type"
                :placeholder="$t('m.pleaseChoose')"
                ref="select1"
                @change="searchClick('', 1)"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.status') + ':'" class="page_list_top">
              <el-select
                v-model="params.state"
                :placeholder="$t('m.pleaseChoose')"
                ref="select2"
                @change="searchClick('', 2)"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button
                class="search_button reset_button"
                @click="searchClick('')"
                >{{ $t('m.search_') }}</el-button
              >
            </el-form-item>
            <el-form-item class="page_list_top">
              <el-button class="reset_button" @click="searchClick('1')">{{
                $t('m.refresh')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider class="el_divider"></el-divider>
        <div class="el_table_div">
          <el-table :data="page.records">
            <el-table-column
              prop="ucode"
              :label="$t('m.User_ID')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.ucode | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              :label="$t('m.invite_Type')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.type | stateFormat(options1) | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="content"
              :label="$t('m.Feedback_content')"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="images"
              :label="$t('m.Feedback_image')"
              min-width="120"
            >
              <template slot-scope="scope">
                <el-image
                  v-if="scope.row.images[0]"
                  style="width: 67px; height: 50px;border-radius:4px;"
                  :src="fileUrlFormat(scope.row.images[0])"
                  :preview-src-list="
                    scope.row.images.map(item => fileUrlFormat(item))
                  "
                >
                </el-image>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              :label="$t('m.Processing_status')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.state | stateFormat(options2) | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="processState"
              :label="$t('m.Processing_results')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{
                    scope.row.processState | stateFormat(options3) | strFormat
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditName"
              :label="$t('m.Action_by')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.auditName | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditRemark"
              :label="$t('m.Order_Details_Remarks')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.auditRemark | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              :label="$t('m.branch_Creationdate')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | dateformat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('m.Users_Details_Operation')"
              min-width="104"
              v-if="handleAuth"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="disposeBtn(scope.row)"
                  v-if="scope.row.state == 0"
                  >{{ $t('m.Handle') }}</el-button
                >
                <span v-else>--</span>
              </template>
            </el-table-column>
            <emptydata
              slot="empty"
              v-if="!page.records || page.records.length == 0"
            />
          </el-table>
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="page.size"
            :current-page.sync="page.current"
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :total="page.total"
            class="el_pagination"
            @size-change="changePageSize"
            @current-change="changePageNum"
            v-show="page.total > 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 用户反馈 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="responseDialog"
      :title="$t('m.userFeedback')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.invite_Type') }}: <span class="dialog_content2">{{
            scopeRow.type | stateFormat(options1) | strFormat
          }}</span>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Feedback_content') }}: <span class="dialog_content2">{{
            scopeRow.content
          }}</span>
        </div>
        <div
          class="dialog_content1"
          style="display:flex"
          v-if="scopeRow.images[0]"
        >
          {{ $t('m.Feedback_image') }}: 
          <el-image
            v-for="(item, index) in scopeRow.images"
            :key="index"
            style="width: 85px; height: 85px;margin-right:20px;border-radius:4px;"
            :src="fileUrlFormat(item)"
            :preview-src-list="[fileUrlFormat(item)]"
          >
          </el-image>
        </div>
        <div
          class="dialog_content1"
          style="display:flex"
          v-else
        >
          {{ $t('m.Feedback_image') }}: 
         <span>--</span>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Processing_results') }}*: 
          <el-radio v-model="auditParams.processState" :label="0">{{
            $t('m.workOrderUserFeedbackAccept')
          }}</el-radio>
          <el-radio v-model="auditParams.processState" :label="1">{{
            $t('m.workOrderUserFeedbackIgnore')
          }}</el-radio>
          <el-radio v-model="auditParams.processState" :label="2">{{
            $t('m.Order_else')
          }}</el-radio>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Order_Details_Remarks') }}*: 
        </div>
        <div class="dialog_content3">
          <el-input
            v-model="auditParams.auditRemark"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
            clearable
            maxlength="200"
            show-word-limit
            :placeholder="$t('m.Please_enter')"
            style="width:100%"
          >
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="responseDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="auditClick" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/mixins/page'
import { EventBus } from '@/common/util'
export default {
  mixins: [page],
  data () {
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为: ‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      },
      params: {
        search: '', //模糊查询
        rangeTime: '', //时间戳范围
        state: '',
        type: '' //反馈类型 1-功能异常 2-建议优化 3-2分钟内正常归还 4-其他反馈
      },
      options1: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.workOrderUserFeedbackType1')
        },
        {
          value: 2,
          label: this.$t('m.workOrderUserFeedbackType2')
        },
        {
          value: 4,
          label: this.$t('m.Order_else')
        }
      ],
      options2: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Pending_processing')
        },
        {
          value: 1,
          label: this.$t('m.Processed')
        }
      ],
      options3: [
        {
          value: 0,
          label: this.$t('m.workOrderUserFeedbackAccept')
        },
        {
          value: 1,
          label: this.$t('m.workOrderUserFeedbackIgnore')
        },
        {
          value: 2,
          label: this.$t('m.Order_else')
        }
      ],
      responseDialog: false,
      scopeRow: {
        images:[]
      },
      auditParams: {
        id: '',
        processState: '',
        auditRemark: ''
      },
      feedbackAuth: this.permissionsId(109),
      handleAuth: this.permissionsId(215)
    }
  },

  created () {
    if (!this.feedbackAuth) {
      return
    }
    this.getFeedbackLists()
    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },
  mounted () {},
  methods: {
    //获取异常订单列表
    getFeedbackLists () {
      this.$api.order.getFeedbackList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
          this.page.records.map(item => {
            item.images = item.images.split(',')
          })
        }
      })
    },
    // 搜索/重置
    searchClick (reset, e) {
      // 是否重置
      let size = this.page.size
      this.page = this.$options.data.call(this).page
      if (reset) {
        this.params = this.$options.data.call(this).params
        this.timeDefaultShow = new Date()
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
      } else {
        this.page.size = size
      }
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
      this.getFeedbackLists()
    },
    // 每页数
    changePageSize (val) {
      this.page.current = 1
      this.page.size = val
      this.getFeedbackLists()
    },
    // 当前页
    changePageNum (val) {
      this.page.current = val
      this.getFeedbackLists()
    },
    disposeBtn (item) {
      this.scopeRow = item
      this.auditParams = this.$options.data.call(this).auditParams
      this.auditParams.id = item.id
      this.responseDialog = true
    },
    auditClick () {
      if (this.auditParams.processState === '') {
        this.$message(this.$t('m.Please_select_Processing_results'))
        return
      }
      if (!this.auditParams.auditRemark) {
        this.$message(this.$t('m.Enter_remarks'))
        return
      }
      this.$openLoading()
      this.$api.order.auditUser(this.auditParams).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.responseDialog = false
          this.triggerBPageMethod()
          this.getFeedbackLists()
          this.$closeLoading()
        } else {
          this.$closeLoading()
          this.$message.error(res.message)
        }
      })
    },
    triggerBPageMethod () {
      EventBus.$emit('trigger-method')
    }
  }
}
</script>
